<h2></h2>
<div class="content">
  <section class="accordion">
    <h3>검색조건</h3>
    <div>
      <form id="form1" name="form1" method="post" action="">
        <div>
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="searchTb">
          <colgroup>
            <col width="20%"/>
            <col width="80%"/>
          </colgroup>
            <tr>
              <th scope="row">기관</th>
              <td>경상북도</td>
            </tr>
            <tr>
              <th scope="row">계획년도</th>
              <td><select name="select7" id="select7">
                  <option>2014</option>
                  <option>2013</option>
                  <option>2012</option>
                  <option>2011</option>
                </select></td>
            </tr>
            <tr>
              <th scope="row">병해충명</th>
              <td><select name="selName" id="selName">
                  <option value="1">솔잎혹파리</option>
                  <option value="2">솔껍질 깍지벌레</option>
                  <option value="3">참나무 시들음병</option>
                  <option value="4">일반병해충</option>
                </select></td>
            </tr>
          </table>
          <div class="btn_dp">
            <button type="button">초기화</button>
            <button type="button" onclick="loadData()">조회</button>
          </div>
        </div>
      </form>
    </div>
  </section>
  <section class="">
    <div class="btn_dp">
      <button type="button">엑셀 다운로드</button>
      <!--<a href="방제계획 등록.html" class="btn layer">등록</a> --></div>
    <table id="jsonmap">
    </table>
    <div id="pjmap"> </div>
  </section>
  <script type="text/javascript">
/*
val="0";
selList(val);
jQuery(function(){
	jQuery("#selName").change(function(){
			selList(jQuery(this).val());
		});
	
	});*/
	
	function loadGridType1() {
		jQuery("#jsonmap").jqGrid({        
			url:'/sample/data22.json',
			datatype: "json",		
			colModel:[
				 {name:'방제계획번호' ,	width:100, 	align:"center"}
				,{name:'시도' ,	width:60, 	align:"center"}
				,{name:'시군구' ,	width:60, 	align:"center"}
				,{name:'읍면동' ,	width:60, 	align:"center"}
				,{name:'리' ,	width:50, 	align:"center"}
				,{name:'계1' ,	width:30, 	align:"center"}
				,{name:'심' ,	width:30, 	align:"center"}
				,{name:'중' ,	width:30, 	align:"center"}
				,{name:'경' ,	width:30, 	align:"center"}
				,{name:'계2' ,	width:30, 	align:"center"}
				,{name:'재해저감' ,	width:60, 	align:"center"}
				,{name:'나무주사' ,	width:60, 	align:"center"}
				,{name:'천적방사' ,	width:100, 	align:"center"}
				,{name:'기  타' ,	width:100, 	align:"center"}
				,{name:'비고' ,	width:100, 	align:"center"}
				,{name:'계획년도' ,	width:100, 	align:"center"}
				,{name:'입력일' ,	width:100, 	align:"center"}
				,{name:'수정일' ,	width:100, 	align:"center"}
			]
			, rowNum:20
			, rowList:[10,20,30]
			, pager: '#pjmap'
			, viewrecords: true
			, height: '200'
			, caption : '발생계획 목록 (솔잎혹파리)'
			, autowidth : true
			, shrinkToFit : false
		});
		jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:false,add:false,del:false});
		jQuery("#jsonmap").jqGrid('setGroupHeaders', {
		  useColSpanStyle: true, 
		  groupHeaders:[
			{startColumnName: '계1', numberOfColumns: 4, titleText: '2014년 발생상황'},
			{startColumnName: '계2', numberOfColumns: 5, titleText: '2015년 방제계획'}
		  ]	
		});
		
		jQuery("#jsonmap").gridResize();
	}
	function loadGridType2() {
	}
	function loadGridType3() {
	}
	
	function loadGridType4() {
	}
	
	
	$("#selName").change(function() {
		var val = $(this).val();
		if ( val == 1 ) loadGridType1();
		if ( val == 2 ) loadGridType2();
		if ( val == 3 ) loadGridType3();
		if ( val == 4 ) loadGridType4();
	});
	
	loadGridType1();
    </script> 
</div>
